<!-- 呼叫后响应 -->
<template>
  <div class="call_invitation">
    <!-- 基础版 -->
    <div v-if="false">
      <!-- 主叫(仅p2p存在,多人无主叫呼叫页面) -->
      <template v-if="getIsCallingParty">
        <!-- 远端用户信息(呼叫的用户信息)-->
        <div>
          远端用户信息 {{ getp2pRemoteInfo }}
          <p>等待对方接受</p>
        </div>
        <!-- 主叫相关操作 -->
        <div>
          <img
            @click="cancelCallFn"
            src="@/assets/img/arcall/hangup.png"
            draggable="false"
            alt="取消呼叫"
            title="取消呼叫"
          />
        </div>
      </template>
      <!-- 被叫 -->
      <template v-else>
        <!-- p2p被叫信息 -->
        <div v-if="getModel === 1">
          <!-- 主叫信息 -->
          <div>
            用户{{ getp2pRemoteInfo }}
            <p>邀请你 {{ getpattern == "audio" ? "音频" : "视频" }}通话</p>
          </div>
        </div>
        <!-- 多人被叫信息 -->
        <div v-else>
          <!-- 主叫信息 -->
          <div>
            用户{{ getMultiRemoteInfoList.dialingInfo }}
            <p>邀请你 {{ getpattern == "audio" ? "音频" : "视频" }}通话</p>
          </div>
          <!-- 频道内其他人员信息 -->
          <div>
            <span>他们也在</span>
            <ul>
              {{
                getMultiRemoteInfoList.memberInfo
              }}
            </ul>
          </div>
        </div>
        <!-- 被叫相关操作 -->
        <div>
          <!-- p2p视频呼叫才可以切换成语音 -->
          <img
            v-if="getModel === 1 && getpattern === 'video'"
            @click="operationFn('切换')"
            class="w-16 h-16 cursor-pointer"
            src="@/assets/img/arcall/changaudio-hover.png"
            draggable="false"
            alt="切换为语音通话"
            title="切换为语音通话"
          />

          <img
            @click="operationFn('接听')"
            class="w-16 h-16 cursor-pointer mr-8"
            src="@/assets/img/arcall/answer.png"
            draggable="false"
            alt="接听"
            title="接听"
          />
          <img
            @click="operationFn('挂断')"
            class="w-16 h-16 cursor-pointer"
            src="@/assets/img/arcall/hangup.png"
            draggable="false"
            alt="挂断"
            title="挂断"
          />
        </div>
      </template>
    </div>

    <!-- 美化版 -->
    <div v-else style="position: relative">
      <img src="@/assets/img/arcall/call_bg.png" alt="" />
      <div class="beautify">
        <!-- 主叫(仅p2p存在,多人无主叫呼叫页面) -->
        <template v-if="getIsCallingParty">
          <!-- 远端用户信息(呼叫的用户信息)-->
          <div>
            远端用户 {{ getp2pRemoteInfo.userId }}
            <p>等待对方接受</p>
          </div>
          <!-- 主叫相关操作 -->
          <div style="margin-top: 60px">
            <img
              @click="cancelCallFn"
              src="@/assets/img/arcall/hangup.png"
              draggable="false"
              alt="取消呼叫"
              title="取消呼叫"
            />
          </div>
        </template>
        <!-- 被叫 -->
        <template v-else>
          <!-- p2p被叫信息 -->
          <div v-if="getModel === 1">
            <!-- 主叫信息 -->
            <div>
              用户{{ getp2pRemoteInfo.userId }}
              <p>邀请你 {{ getpattern == "audio" ? "音频" : "视频" }}通话</p>
            </div>
          </div>
          <!-- 多人被叫信息 -->
          <div v-else>
            <!-- 主叫信息 -->
            <div>
              用户{{
                getMultiRemoteInfoList.dialingInfo &&
                getMultiRemoteInfoList.dialingInfo.userId
              }}
              <p>邀请你 {{ getpattern == "audio" ? "音频" : "视频" }}通话</p>
            </div>
            <!-- 频道内其他人员信息 -->
            <div v-if="getMultiRemoteInfoList.memberInfo.length > 0">
              <span>他们也在</span>
              <div>
                <el-tag
                  v-for="peerUser in getMultiRemoteInfoList.memberInfo"
                  :key="peerUser.userId"
                  style="margin: 0px 10px"
                >
                  {{ peerUser.userId }}
                </el-tag>
              </div>
            </div>
          </div>
          <!-- 被叫相关操作 -->
          <div style="margin-top: 60px">
            <!-- p2p视频呼叫才可以切换成语音 -->
            <img
              v-if="getModel === 1 && getpattern === 'video'"
              @click="operationFn('切换')"
              class="w-16 h-16 cursor-pointer"
              src="@/assets/img/arcall/changaudio-hover.png"
              draggable="false"
              alt="切换为语音通话"
              title="切换为语音通话"
            />

            <img
              @click="operationFn('接听')"
              class="w-16 h-16 cursor-pointer mr-8"
              src="@/assets/img/arcall/answer.png"
              draggable="false"
              alt="接听"
              title="接听"
            />
            <img
              @click="operationFn('挂断')"
              class="w-16 h-16 cursor-pointer"
              src="@/assets/img/arcall/hangup.png"
              draggable="false"
              alt="挂断"
              title="挂断"
            />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {
  hangup,
  switchToAudioCall,
  acceptCall,
  rejectCall,
} from "@/until/arcall";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters([
      "getIsCallingParty",
      "getpattern",
      "getModel",
      "getp2pRemoteInfo",
      "getMultiRemoteInfoList",
    ]),
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    // 主叫取消呼叫
    cancelCallFn() {
      hangup();
    },
    async operationFn(type) {
      switch (type) {
        case "切换":
          await switchToAudioCall();
          await acceptCall();
          // 通话模式
          this.$store.commit("updataPattern", "audio");
          // 进入语音通话页面
          this.$store.commit("updataCommentsStatus", 2);
          break;
        case "接听":
          console.log("getModel", this.getModel);
          if (this.getModel === 0) {
            // 一段时间后无响应(多人)
            this.$store.commit("noResponseMultiRemoteInfoList", true);
          }
          // 进入对应的通话页面
          await acceptCall();
          this.$store.commit("updataCommentsStatus", 2);
          break;
        case "挂断":
          rejectCall();
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.call_invitation {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/** 美化版 */
.beautify {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>
